<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"/>
    <script src="/static/layui/layui.js"></script>
</head>

<!--1 提供table
lay-filter="test" 做事件监听
-->
<table id="tbItemTable" lay-filter="test"></table>

<!--3.提供一个操作行工具栏  操作-->
<script id="delAndUpdateBar" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script id="toolBar" type="text/html">
    <a class="layui-btn layui-btn-lg " lay-event="add">新增</a>
</script>

<!--修改的表单-->
<div style="display: none;padding: 20px" id="updateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">名称:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="title" placeholder="请输入商品名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">卖点:</label>
            <div class="layui-input-block">
                <input type="text" name="sellPoint" placeholder="请输入卖点" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格:</label>
            <div class="layui-input-block">
                <input type="text" name="price" placeholder="请输入价格" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-block">
                <input type="text" name="num" placeholder="请输入数量" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
                        lay-filter="doSubmit" lay-submit="">提交
                </button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置
                </button>
            </div>
        </div>
    </form>

</div>


<!--2.编写js，通过异步请求去查数据
    layui通过table组件，把数据封装到页面的表格中
-->
<script>
    //导入table组件   easyUI  bootstrap-table
    //内置jquery
    layui.use(["table","layer","jquery","form","upload"],function(){
        var  table  = layui.table;//table组件
        var layer = layui.layer;//弹出框组件
        var $ = layui.jquery;//jquery组件
        var form = layui.form;//表单组件
        //为table填充数据
        var tableIns = table.render({
            elem: '#tbItemTable' //表格的id
            ,url: 'findItemByPage' //异步请求的地址
            ,toolbar:"#toolBar"
            ,page: true //开启分页
            ,cols: [[ //表头
                //{"id":1,"username":"shine1","sex":"男","city":"保定","score":100}
                //field的值json的key
                //title： 列标题  sort 排序  width：宽
//{"id":856645,"title":"三星 Galaxy S4 (I9500) 16G版 星空黑 联通3G手机","sellPoint":"年货特价来袭！三星经典旗舰机！",
// "price":188800,"num":99999,"images":"http://image.ttshop.com/jd/2cd67c806e054435bce4c931a731493a.jpg"}
                {field:'id', width:120, title: 'ID', sort: true}
                ,{field:'title', width:300, title: '商品名称'}
                ,{field:'sellPoint',  title: '卖点'}
                ,{field:'price',  title: '价格',width:80,sort:true} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
                ,{field:'num',width:60, title: '数量', sort: true}
                ,{field:"right",title:"操作",toolbar: '#delAndUpdateBar'}
            ]]
        });

        //监听事件 lay-filter="test"
        //tool 事件名 监听的行工具栏   (test)是table中lay-filter属性的值
        var  url = null;
        var  mainIndex = null;
        table.on('tool(test)', function(obj){
            var  data = obj.data;//这一行的数据
            var event =  obj.event;//得到dom元素lay-event的值
            //lay-event="del"
            console.log(data);
            console.log(event);
            if(event==='del'){
                console.log('删除。。。。。。');
                //1)根据id异步删除这条数据
                $.get("/delTbItem/"+data.id,function(r){
                    if(r.code===0){//删除成功
                        //2）页面再移除这一行
                        layer.alert(r.msg);
                        obj.del();
                    }else{
                        layer.alert(r.msg);
                    }
                });

            }else if(event==='edit'){//lay-event="edit"
                console.log('修改。。。。。。');
                //layer
                mainIndex = layer.open({
                    type:1,
                    title:"修改商品",
                    content:$("#updateDiv"),
                    area: ['800px', '300px'],
                    success:function(index){
                        //得到原来的值   给表单赋值
                        //jquery
                        // $("#id").val(data.id);
                        // $("#title").val(data.title);
                        // ..
                        //给表单赋值 表单的id  赋的值
                        ////给表单赋值
                        //form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        form.val("dataFrm",data);
                        url = "updateTbItem";
                    }

                });

                //跟新数据
                // obj.update({
                //     title:"",
                //     price:""
                // });

            }

        })

        //表格的工具栏事件监听
        //监听lay-filter为test的表格的工具栏的事件
        table.on("toolbar(test)",function(obj){
             var event = obj.event;
             //  <a class="layui-btn layui-btn-lg " lay-event="add">新增</a>
            if(event==="add"){
                console.log("新增。。。。。。")
                mainIndex = layer.open({
                    type:1,
                    title:"新增商品",
                    content:$("#updateDiv"),
                    area: ['800px', '300px'],
                    success:function(index){
                        //清空表单原来的值
                        //$("#dataFrm") jquery
                        //$("#dataFrm")[0]  dom
                        $("#dataFrm")[0].reset();

                        url ="addTbItem";
                    }

                });
            }
        });

        //监听提交表单   lay-filter="doSubmit"

        form.on("submit(doSubmit)", function (obj) {
            console.log(obj+"-----------");
            //序列化表单数据
            var params = $("#dataFrm").serialize();//得到表单的值
            //id=111&title=sdsds
            console.log(params);
            $.post(url, params, function (obj) {
                if(obj.code===0){
                    layer.msg(obj.msg);

                    //关闭弹出层
                    layer.close(mainIndex)

                    //刷新数据 表格
                    tableIns.reload();
                    //跟新表格数据
                }else{
                    layer.msg(obj.msg);
                }


            })
        });

    });
</script>

</body>
</html>